<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                padding: 0;
                margin: 0;
            }
            body {
                min-width: 1200px;
            }
            #nav {
                width: 800px;
                height: 450px;
                position: relative;
                overflow: hidden;
            }
            img {
                width: 800px;
                height: 450px;
            }
            #nav-item {
                width: 800px;
                display: flex;
                overflow: hidden;
                list-style: none;
            }
            a {
                transition: 0.5s all ease;
                /* position: absolute; */
            }
            #nav-btn {
                height: 35px;
                width: 800px;
                display: flex;
                justify-content: center;
                position: absolute;
                bottom: 0;
                /* background-color: red; */
            }
            #nav-btn span {
                display: flex;
                align-items: center;
                justify-content: center;
                transition: 0.5s all ease;
                width: 80px;
                height: auto;
                background-color: white;
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul id="nav-item">
                <li>
                    <a href=""
                        ><img
                            src="./img/1fcb339847a87291b289e5f2b6f6858c.jpeg"
                            alt=""
                    /></a>
                </li>
                <li>
                    <a href=""
                        ><img
                            src="./img/574e5ba374e8b3b2cac7ecac299998df.jpeg"
                            alt=""
                    /></a>
                </li>
                <li>
                    <a href=""
                        ><img
                            src="./img/8e4aa9076140242d389376d20b69be0d.jpeg"
                            alt=""
                    /></a>
                </li>
                <li>
                    <a href=""
                        ><img
                            src="./img/9921a46c8dd13daa5b54214268f565bf.jpeg"
                            alt=""
                    /></a>
                </li>
                <li>
                    <a href=""
                        ><img
                            src="./img/d18250a7973d0ad8e1e6d12c5996183f.jpeg"
                            alt=""
                    /></a>
                </li>
            </ul>
            <div id="nav-btn">
                <span>第一个</span>
                <span>第二个</span>
                <span>第三个</span>
                <span>第四个</span>
                <span>第五个</span>
            </div>
        </div>

        <script>
            let nav = document.getElementById("nav");
            let btnMenu = document.getElementById("nav-btn");
            let spanBtn = btnMenu.querySelectorAll("span");
            let navItem = document.getElementById("nav-item");
            let imgMargin = navItem.querySelectorAll("li>a");
            console.log(imgMargin);
            for (let i = 0; i < imgMargin.length; i++) {
                let a = i;
                // console.log(a);
                spanOnclick(a);
            }

            function spanOnclick(arr) {
                spanBtn[arr].onclick = function () {
                    for (let j = 0; j < imgMargin.length; j++) {
                        imgMargin[j].style.marginLeft = "0px";
                        spanBtn[j].style.scale = null;
                        spanBtn[arr].style.zIndex = null;
                    }
                    imgMargin[arr].style.marginLeft = -arr * 800 + "px";
                    spanBtn[arr].style.scale = "1.3";
                    spanBtn[arr].style.zIndex = "2";
                };
            }
        </script>
    </body>
</html>
